<template>
  <el-dialog :model-value="dialogVisible" :z-index="1000" :before-close="handleClose" title="开锁记录" width="80%" draggable>
    <div class="unlockList">
      <ProTable
        ref="proTable"
        title="开锁列表"
        :columns="columns"
        :request-api="getTableList"
        :data-callback="dataCallback"
        :tool-button="false"
      >
        <!-- Expand -->
        <template #expand="scope">
          {{ scope.row }}
        </template>
      </ProTable>
    </div>
  </el-dialog>
</template>

<script setup lang="ts" name="UnlockRecord">
import { ref } from "vue";
import { unlockResult } from "@/api/modules/smartLock/control/smartLockControl";
import ProTable from "@/components/ProTable/index.vue";
const loading = ref(false);
const proTable = ref();

const columns: any = [
  {
    prop: "hotelname",
    label: "酒店名称"
  },
  {
    prop: "roomCode",
    isShow: false,
    label: "房间编号",
    search: { el: "input" }
  },
  {
    prop: "roomName",
    label: "房间号"
  },
  {
    prop: "requestStatus",
    label: "开锁状态",
    render: scope => {
      let statusName = "";
      switch (scope.row.requestStatus) {
        case 0:
          statusName = "待开锁";
          break;
        case 1:
          statusName = "开锁成功";
          break;
        case 2:
          statusName = "开锁失败";
          break;
        default:
          break;
      }
      return statusName;
    }
  },
  {
    prop: "requestTime",
    label: "开锁时间"
  }
];

const dataCallback = (data: any) => {
  const { records, page } = data;
  loading.value = false;
  return {
    list: records,
    total: page.total
  };
};

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  loading.value = true;
  return unlockResult({ ...newParams, mapndx: props.mapndx });
};

const props = defineProps<{
  dialogVisible: boolean;
  mapndx: String;
  handleClose: () => void;
}>();
console.log(props);
</script>

<style lang="scss" scoped>
.unlockList {
  height: 80vh;
  overflow-y: auto;
}
</style>
